<template class="dh animate__animated animate__slideInLeft">
    <view >
      <van-nav-bar title="合租/单间发布" left-arrow @click-left="goBack" />
      <div class="banner">
        <p class="title">轻轻松松上架房源</p>
        <p class="subtitle">实名认证→发布房源→真房认证→平台</p>
      </div>
  
      <!-- 房源基础信息 -->
      <van-cell-group title="房源基础信息" class="xinxi">
        <van-field v-model="city" label="所在城市" readonly @click="goToCitySelect" />
        <van-field v-model="address" label="小区名称地址" placeholder="请输入" required />
        <van-field v-model="area" label="整套面积" type="number" right-icon="楼层" placeholder="平方米" required />
        <van-field v-model="floor" label="楼层|总楼层" placeholder="请输入" required />
        <van-field v-model="layout" label="户型" placeholder="请输入" required />
      </van-cell-group>
  
      <hr />
  
      <!-- 房源设施 -->
      <van-cell-group title="房源设施">
        <van-tag v-for="(item, index) in facilities" :key="index" :class="{ active: selectedFacilities.includes(item) }"
          size="large" @click="toggleFacility(item)">
          {{ item }}
        </van-tag>
      </van-cell-group>
  
      <br />
      <hr />
  
      <!-- 分房信息，改为上传图片功能 -->
      <van-cell-group title="房间图片上传">
        <van-uploader v-model:files="roomImages" :after-read="handleAfterRead" :max-count="9" :preview-size="80"
          :preview-teleport="parentNode" />
        <div class="image-preview-container">
          <van-image v-for="(image, index) in roomImages" :key="index" :src="image.url" class="preview-image"
            @click="previewImage(index)" />
        </div>
      </van-cell-group>
      <br />
      <hr />
      <van-cell-group title="查看房源">
        <van-field label="看房时间" v-model="viewingTime" placeholder="请选择看房时间" required @click="showCalendar" />
        <div class="radio-wrapper">
          <span class="radio-label">&nbsp&nbsp&nbsp*预约看房&nbsp&nbsp</span>
          <van-radio-group v-model="isViewAvailable" class="radio-group">
            <van-radio label="可以预约" value="yes">可以预约&nbsp&nbsp&nbsp&nbsp&nbsp</van-radio>
            <van-radio label="不可预约" value="no">不可预约</van-radio>
          </van-radio-group>
        </div>
        <van-field label="*入驻要求" v-model="moveInRequirements" placeholder="请输入" />
      </van-cell-group>
      <van-calendar v-model:show="show" :show-confirm="false" @confirm="onConfirm" />
      <hr />
      <br>
      <div class="xieyi">
        <van-checkbox v-model="acceptTerms" label="我承诺房源真实并同意《个人用户房源服务协议》" />
        我承诺房源真实并同意《个人用户房源服务协议》
      </div>
      <br>
      <br>
      <br>
      <br>
      <van-button type="info" size="large" block @click="goToHome">免费发布</van-button>
      <van-image-preview v-model:show="imagePreviewShow" :images="imagePreviewList" />
    </view>
  </template>
  <script setup>
  import { ref, getCurrentInstance, watchEffect } from 'vue';
  import 'animate.css';
  import { useRouter, useRoute } from 'vue-router';
  
  const router = useRouter();
  const route = useRoute();
  const city = ref('深圳');
  const address = ref('福岗园大厦');
  const area = ref('58');
  const floor = ref('3层|共20层');
  const layout = ref('2室1厅1卫');
  const moveInRequirements = ref('');
  const acceptTerms = ref(false);
  
  const facilities = ref([
    '冰箱', '洗衣机', '热水器', '宽带', '沙发', '可做饭', '油烟机', '燃气灶', '电磁炉', '壁炉', '橱柜', '餐桌', '电视', '空调', '衣柜', '床', '卫生间', '智能门锁', '阳台', '暖气', '前台'
  ]);
  const selectedFacilities = ref([]);
  
  const roomImages = ref([]);
  const viewingTime = ref('');
  const isViewAvailable = ref('yes');
  const show = ref(false);
  const { proxy } = getCurrentInstance();
  const parentNode = proxy.$el;
  
  const imagePreviewShow = ref(false);
  const imagePreviewList = ref([]);
  
  const showCalendar = () => {
    show.value = true;
  };
  
  const onConfirm = (date) => {
    viewingTime.value = date.toLocaleDateString();
    show.value = false;
  };
  
  const toggleFacility = (item) => {
    const index = selectedFacilities.value.indexOf(item);
    if (index > -1) {
      selectedFacilities.value.splice(index, 1);
    } else {
      selectedFacilities.value.push(item);
    }
  };
  
  const handleAfterRead = (file) => {
    if (roomImages.value.length < 9) {
      roomImages.value.push(file);
    }
  };
  
  const previewImage = (index) => {
    imagePreviewList.value = roomImages.value.map((image) => image.url);
    imagePreviewShow.value = true;
  };
  
  const goBack = () => {
    router.back();
  };
  
  const goToHome = () => {
    router.push('/home');
  };
  
  const goToCitySelect = () => {
    router.push('/cityelect');
  };
  
  // 监听路由变化，回填城市信息
  watchEffect(() => {
    const selectedCity = route.state?.selectedCity;
    console.log('route.state.selectedCity:', selectedCity); // 添加调试语句
    if (selectedCity) {
      city.value = selectedCity;
    }
  });
  // watchEffect(() => {
  //     const selectedCity = route.query.selectedCity; // 从query中获取数据
  //     console.log('route.query.selectedCity:', selectedCity); 
  //     if (selectedCity) {
  //         city.value = selectedCity;
  //     }
  // });
  </script>
  <style scoped>
  .banner {
    background: #b0f1c3;
    padding: 15px;
    text-align: left;
  }
  
  .title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
  }
  
  .subtitle {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
  }
  
  .xinxi {
    background-color: #72c938;
  }
  
  .van-tag {
    border: 1px solid #ff8c00;
    color: #ff8c00;
    background: white;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 14px;
  }
  
  .van-tag.active {
    background: #ff8c00;
    color: white;
  }
  
  .van-button {
    background-color: #f56c6c;
    border-radius: 8px;
    padding: 10px;
  }
  
  .sub-title {
    font-size: 12px;
    color: #888;
    padding-left: 15px;
  }
  
  .xieyi {
    font-size: 16px;
    float: right;
    align-items: center;
  }
  
  .radio-container {
    display: flex;
    align-items: center;
  }
  
  .radio-container van-radio-group {
    margin-left: 15px;
  }
  
  .radio-wrapper {
    display: flex;
    align-items: center;
  }
  
  .radio-label {
    margin-right: 10px;
  }
  
  .radio-group {
    display: flex;
    align-items: center;
  }
  
  .radio-group van-radio {
    margin-right: 15px;
  }
  
  .image-preview-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  
  .preview-image {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  </style>